<template>
	<a-layout class="layout-frame">
		<a-layout-sider hide-trigger collapsible :collapsed="collapsed">
			<div class="logo">
				<img src="@/assets/logo-nest.svg" alt="">
				<transition name="fade">
					<span v-if="!collapsed" style="color: var(--color-text-1);">通用后台管理系统</span>
				</transition>
			</div>
			<a-menu v-model:selectedKeys="state.selectedKeys" v-model:openKeys="state.openKeys" :style="{ width: '100%' }"
				@menuItemClick="onClickMenuItem">
				<template v-for="(item, index) in menus" :key="(item.name as string)">
					<template v-if="!item.meta.hide">
						<a-sub-menu v-if="item.children && item.children.length > 0" :key="(item.name as string)">
							<template #title>
								<span>
									<component v-if="item.meta?.icon" :is="item.meta.icon" size="16"></component>
									{{ item.meta?.title }}
								</span>
							</template>
							<template v-for="(child, index) in item.children">
								<a-menu-item v-if="!child.meta.hide" :key="(child.name as string)">
									<component v-if="child.meta?.icon" :is="child.meta?.icon" size="16"></component>
									<span v-else style="width: 8px;display: inline-block;"></span>
									{{ child.meta?.title }}
								</a-menu-item>
							</template>
						</a-sub-menu>
						<template v-else>
							<a-menu-item :key="(item.name as string)">
								<component v-if="item.meta?.icon" :is="item.meta.icon" size="16"></component>
								{{ item.meta?.title }}
							</a-menu-item>
						</template>
					</template>
				</template>
			</a-menu>
		</a-layout-sider>
		<a-layout>
			<a-layout-header class="coustom-header">
				<a-button shape="round" @click="onCollapse">
					<IconCaretRight v-if="collapsed" />
					<IconCaretLeft v-else />
				</a-button>
				<div class="header-main">
					<div class="icon-btn" @click="switchTheme">
						<icon-moon-fill v-if="!state.isDark" :style="{fontSize:'24px'}"/>
						<icon-sun-fill v-if="state.isDark" :style="{fontSize:'24px'}"/>
					</div>
					<UserBlock></UserBlock>
				</div>
			</a-layout-header>
			<a-layout style="padding: 0 24px;overflow-x: auto;">
				<a-breadcrumb :style="{ margin: '16px 0'}">
					<a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
						<a-link v-if="item.components || item.redirect" :href="item.path">{{ item.meta.title }}</a-link>
						<a-link v-else>{{ item.meta.title }}</a-link>
					</a-breadcrumb-item>
				</a-breadcrumb>
				<a-layout-content>
					<RouterView />
				</a-layout-content>
				<a-layout-footer style="color: var(--color-text-1);">通用后台管理系统 powered by xiaobaozi</a-layout-footer>
			</a-layout>
		</a-layout>
	</a-layout>
</template>
<script lang="ts" setup>
import { computed, reactive, ref, watch } from 'vue';
import {
	IconCaretRight,
	IconCaretLeft,
	IconMoonFill,
	IconSunFill
} from '@arco-design/web-vue/es/icon';
import { RouterView, useRoute, useRouter, type RouteRecordName } from 'vue-router';
import UserBlock from './user.vue';
import {menuRoutes} from '@/router/routes';

const state: {
	collapsed: boolean,
	selectedKeys: RouteRecordName[],
	openKeys: RouteRecordName[],
	isDark: boolean,
} = reactive({
	collapsed: false,
	selectedKeys: [],
	openKeys: [],
	isDark: false,
});
const router = useRouter()
const collapsed = ref(false);
const onCollapse = () => {
	collapsed.value = !collapsed.value;
};
const onClickMenuItem = (key: string) => {
	router.push({ name: key })
}

let menus = computed(() => {
	return menuRoutes
})
let breadcrumb = computed(() => router.currentRoute.value.matched.slice(1))

watch(() => router.currentRoute.value, (newVal) => {
	state.selectedKeys = [newVal.name as RouteRecordName]
	state.openKeys = newVal.matched.map((item) => item.name!);
}, { immediate: true })

const switchTheme=()=> {
	if(state.isDark){
		document.body.removeAttribute('arco-theme');
		state.isDark = false;
	}else{
		document.body.setAttribute('arco-theme', 'dark')
		state.isDark = true;
	}
}

</script>
<style scoped lang="scss">
.layout-frame {
	width: 100vw;
	height: 100vh;
	background: var(--default-bg);
	.coustom-header{
		display: flex;
		align-items: center;
		padding:0 20px;
		.header-main{
			flex: 1;
			display: flex;
			justify-content: flex-end;
			.icon-btn{
				display: flex;
				align-items: center;
				margin: 0 10px;
				cursor: pointer;
				color: var(--color-text-1);
				&:active{
					opacity: 0.6;
				}
			}
		}
	}

	.i-icon {
		display: inline-block;
		color: inherit;
		font-style: normal;
		vertical-align: -2px;
		outline: none;
		stroke: currentColor;
	}

	.arco-menu-item .i-icon,
	.arco-menu-inline-header .i-icon {
		margin-right: 16px;
	}

	.arco-menu-light .arco-menu-item.arco-menu-selected {
		background: rgba(var(--arcoblue-6), 0.05);
		border-right: 3px solid rgba(var(--arcoblue-6), 1);
	}
}

.layout-frame :deep(.arco-layout-sider) .logo {
	height: 32px;
	margin: 12px 8px;
	background: rgba(255, 255, 255, 0.2);
	padding: 0 10px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	img {
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}

	h6.arco-typography {
		margin: 0;
	}
}

.layout-frame :deep(.arco-layout-sider-light) .logo {
	background: var(--color-fill-2);
}

.layout-frame :deep(.arco-layout-header) {
	height: 64px;
	line-height: 64px;
	background: var(--color-bg-3);
}

.layout-frame :deep(.arco-layout-footer) {
	height: 48px;
	color: var(--color-text-2);
	font-weight: 400;
	font-size: 14px;
	line-height: 48px;
	justify-content: center;
	text-align: center;
}

.layout-frame :deep(.arco-layout-content) {
	color: var(--color-text-2);
	font-weight: 400;
	font-size: 14px;
	min-width: 1200px;
	height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	flex: 1;
}

.layout-frame :deep(.arco-layout-footer),
.layout-frame :deep(.arco-layout-content) {
	display: flex;
	flex-direction: column;
	/* justify-content: center; */

	font-stretch: condensed;
	/* text-align: center; */
}</style>
